<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { ArrowLeft, Plus, Delete, Document, Upload } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { dataAPI } from '@/http/leancloud';

/**
 * 此页面对应 开单页面
 */
// 定义站点选择数据
const stations = [
  { value: 'yiwu', label: '义乌站' },
  { value: 'beijing', label: '北京站' },
  { value: 'shanghai', label: '上海站' },
  { value: 'guangzhou', label: '广州站' },
  { value: 'shenzhen', label: '深圳站' }
];

// 运输方式选项
const transportModes = [
  { value: 'car', label: '汽运' },
  { value: 'train', label: '铁运' },
  { value: 'air', label: '空运' },
  { value: 'ship', label: '海运' }
];

// 包装选项
const packageOptions = [
  { value: 'box', label: '纸箱' },
  { value: 'bag', label: '编织袋' },
  { value: 'pallet', label: '托盘' },
  { value: 'none', label: '无包装' }
];

// 付款方式选项
const paymentMethods = [
  { label: '现付', value: 'cash' },
  { label: '提付', value: 'collect' },
  { label: '到付', value: 'arrival' },
  { label: '月结', value: 'monthly' }
];

// 生成订单号和货号
const generateOrderNo = () => {
  const timestamp = new Date().getTime();
  return `ORD${timestamp}`;
};

const generateCargoNo = () => {
  const timestamp = new Date().getTime();
  return `CARGO${timestamp}`;
};

// 运单号和货号
const waybillNo = ref(generateOrderNo());
const goodsNo = ref(generateCargoNo());

// 表单数据
const formData = reactive({
  // 站点信息
  departureStation: '义乌站',
  destinationStation: '',
  transferStation: '',
  deliveryMethod: '送货上门',
  
  // 发货人信息
  sender: {
    name: '',
    phone: '',
    address: ''
  },
  
  // 收货人信息
  receiver: {
    name: '',
    phone: '',
    address: ''
  },
  
  // 货物信息
  goodsList: [
    {
      id: 1,
      name: '',
      package: '',
      quantity: '',
      weight: '',
      volume: '',
      length: '',
      width: '',
      height: ''
    }
  ],
  
  // 费用信息
  fees: {
    freight: '',
    deliveryFee: '',
    loadingFee: '',
    returnFee: '',
    transferFee: '',
    declaredValue: '',
    insurance: '',
    packagingFee: '',
    otherFee: ''
  },
  
  // 支付设置
  payment: {
    method: 'cash',
    cashAmount: '',
    collectAmount: '',
    monthlyAmount: '',
    agentFee: '',
    handlingFee: ''
  },
  
  // 其他信息
  other: {
    transportMode: 'car',
    remark: '',
    attachments: []
  }
});

// 计算总数量、总重量、总体积
const totals = computed(() => {
  let totalQuantity = 0;
  let totalWeight = 0;
  let totalVolume = 0;
  
  formData.goodsList.forEach(item => {
    totalQuantity += Number(item.quantity) || 0;
    totalWeight += Number(item.weight) || 0;
    
    // 计算体积
    const length = Number(item.length) || 0;
    const width = Number(item.width) || 0;
    const height = Number(item.height) || 0;
    if (length && width && height) {
      const volume = (length * width * height / 1000000); // 立方米
      totalVolume += volume;
    } else {
      totalVolume += Number(item.volume) || 0;
    }
  });
  
  return {
    quantity: totalQuantity,
    weight: totalWeight.toFixed(2),
    volume: totalVolume.toFixed(2)
  };
});

// 总运费
const totalFreight = computed(() => {
  let total = 0;
  const fees = formData.fees;
  
  // 计算所有费用之和
  total += Number(fees.freight) || 0;
  total += Number(fees.deliveryFee) || 0;
  total += Number(fees.loadingFee) || 0;
  total += Number(fees.returnFee) || 0;
  total += Number(fees.transferFee) || 0;
  total += Number(fees.insurance) || 0;
  total += Number(fees.packagingFee) || 0;
  total += Number(fees.otherFee) || 0;
  
  return total.toFixed(2);
});

// 添加货物行
const addGoodsItem = () => {
  const newId = formData.goodsList.length > 0 
    ? Math.max(...formData.goodsList.map(item => item.id)) + 1 
    : 1;
  
  formData.goodsList.push({
    id: newId,
    name: '',
    package: '',
    quantity: '',
    weight: '',
    volume: '',
    length: '',
    width: '',
    height: ''
  });
};

// 删除货物行
const removeGoodsItem = (index: number) => {
  formData.goodsList.splice(index, 1);
};

// 切换发货人和收货人信息
const switchAddresses = () => {
  const temp = { ...formData.sender };
  formData.sender = { ...formData.receiver };
  formData.receiver = temp;
};

// 提交表单
const submitForm = async () => {
  try {
    // 表单验证
    if (!formData.departureStation) {
      ElMessage.warning('请选择发货站');
      return;
    }
    if (!formData.destinationStation) {
      ElMessage.warning('请选择到货站');
      return;
    }
    if (!formData.sender.name || !formData.sender.phone || !formData.sender.address) {
      ElMessage.warning('请完善发货人信息');
      return;
    }
    if (!formData.receiver.name || !formData.receiver.phone || !formData.receiver.address) {
      ElMessage.warning('请完善收货人信息');
      return;
    }
    if (formData.goodsList.length === 0) {
      ElMessage.warning('请添加货物信息');
      return;
    }

    // 构建订单数据，与App端格式保持一致
    const orderData = {
      orderNo: waybillNo.value,
      cargoNo: goodsNo.value,
      senderName: formData.sender.name,
      senderPhone: formData.sender.phone,
      senderAddress: formData.sender.address,
      receiverName: formData.receiver.name,
      receiverPhone: formData.receiver.phone,
      receiverAddress: formData.receiver.address,
      cargoType: formData.goodsList.map(item => item.name).join(','),
      totalQuantity: totals.value.quantity,
      totalVolume: parseFloat(totals.value.volume),
      totalWeight: parseFloat(totals.value.weight),
      paymentMethod: getPaymentMethodCode(formData.payment.method),
      declaredValue: parseFloat(formData.fees.declaredValue) || 0,
      insuranceFee: parseFloat(formData.fees.insurance) || 0,
      deliveryFee: parseFloat(formData.fees.deliveryFee) || 0,
      unloadingFee: parseFloat(formData.fees.loadingFee) || 0,
      totalFreight: parseFloat(totalFreight.value),
      operator: localStorage.getItem('username') || '管理员',
      operatorPhone: localStorage.getItem('userphone') || '',
      orderTime: {
        __type: "Date",
        iso: new Date().toISOString()
      },
      route: `${formData.departureStation}-${formData.destinationStation}`,
      vehiclePlate: '',
      status: 0  // 初始状态：待接单
    };

    console.log('提交订单数据:', orderData);
    
    // 调用LeanCloud API保存订单
    const result = await dataAPI.save('Order', orderData);
    
    if (result) {
      ElMessage.success('订单创建成功');
      resetForm();
    } else {
      ElMessage.error('订单创建失败');
    }
  } catch (error) {
    console.error('订单提交错误:', error);
    ElMessage.error('订单提交出错，请稍后重试');
  }
};

// 获取付款方式代码（与App端保持一致）
const getPaymentMethodCode = (method: string): number => {
  switch(method) {
    case 'arrival': return 0; // 到付
    case 'collect': return 1; // 提付
    case 'cash': return 2;    // 现付
    case 'monthly': return 3; // 月结
    default: return 2;        // 默认现付
  }
};

// 重置表单
const resetForm = () => {
  // 重置站点信息
  formData.departureStation = '义乌站';
  formData.destinationStation = '';
  formData.transferStation = '';
  formData.deliveryMethod = '送货上门';
  
  // 重置发货人信息
  formData.sender = {
    name: '',
    phone: '',
    address: ''
  };
  
  // 重置收货人信息
  formData.receiver = {
    name: '',
    phone: '',
    address: ''
  };
  
  // 重置货物信息
  formData.goodsList = [
    {
      id: 1,
      name: '',
      package: '',
      quantity: '',
      weight: '',
      volume: '',
      length: '',
      width: '',
      height: ''
    }
  ];
  
  // 重置费用信息
  formData.fees = {
    freight: '',
    deliveryFee: '',
    loadingFee: '',
    returnFee: '',
    transferFee: '',
    declaredValue: '',
    insurance: '',
    packagingFee: '',
    otherFee: ''
  };
  
  // 重置支付设置
  formData.payment = {
    method: 'cash',
    cashAmount: '',
    collectAmount: '',
    monthlyAmount: '',
    agentFee: '',
    handlingFee: ''
  };
  
  // 重置其他信息
  formData.other = {
    transportMode: 'car',
    remark: '',
    attachments: []
  };
  
  // 重置订单号和货号
  waybillNo.value = generateOrderNo();
  goodsNo.value = generateCargoNo();
};

// 只开单
const createOrderOnly = () => {
  submitForm();
};

// 打印运单
const printWaybill = () => {
  submitForm().then(() => {
    console.log('打印运单');
    // 这里可以添加打印运单的逻辑
  });
};

// 打印标签
const printLabel = () => {
  submitForm().then(() => {
    console.log('打印标签');
    // 这里可以添加打印标签的逻辑
  });
};

// 双打（运单和标签）
const printBoth = () => {
  submitForm().then(() => {
    console.log('同时打印运单和标签');
    // 这里可以添加同时打印的逻辑
  });
};

// 计算运费
const calculateFreight = () => {
  // 模拟运费计算
  formData.fees.freight = (Math.random() * 100 + 30).toFixed(2);
};

// 选择客户
const selectCustomer = (type: 'sender' | 'receiver') => {
  console.log(`选择${type === 'sender' ? '发货人' : '收货人'}`);
  // 这里添加选择客户的逻辑
};

// 初始化
onMounted(() => {
  // 设置默认值或加载必要数据
  if (!localStorage.getItem('username')) {
    localStorage.setItem('username', '管理员');
  }
});
</script>

<template>
  <div class="order-create-container">
    <!-- 顶部信息栏 -->
    <div class="order-header">
      <div class="waybill-info">
        <div class="waybill-number">运单号：{{ waybillNo }}</div>
        <div class="goods-number">货号：{{ goodsNo }}</div>
      </div>
      <div class="order-title">货 物 运 输 单</div>
      <div class="order-date">{{ new Date().toLocaleDateString().replace(/\//g, '/') }}</div>
    </div>
    
    <!-- 表单内容 -->
    <div class="order-form">
      <!-- 站点信息 -->
      <div class="section station-section">
        <div class="station-item required">
          <div class="station-label">发货站</div>
          <el-select v-model="formData.departureStation" placeholder="请选择">
            <el-option v-for="item in stations" :key="item.value" :label="item.label" :value="item.label" />
          </el-select>
        </div>
        
        <div class="station-item required">
          <div class="station-label">到货站</div>
          <el-select v-model="formData.destinationStation" placeholder="请选择">
            <el-option v-for="item in stations" :key="item.value" :label="item.label" :value="item.label" />
          </el-select>
        </div>
        
        <div class="station-item">
          <div class="station-label">中转站</div>
          <el-select v-model="formData.transferStation" placeholder="经由">
            <el-option v-for="item in stations" :key="item.value" :label="item.label" :value="item.label" />
          </el-select>
        </div>
        
        <div class="station-item">
          <div class="station-label">配送方式</div>
          <el-select v-model="formData.deliveryMethod" placeholder="配送方式">
            <el-option label="送货上门" value="送货上门" />
            <el-option label="自提" value="自提" />
          </el-select>
        </div>
      </div>
      
      <!-- 发货人与收货人信息 -->
      <div class="section address-section">
        <div class="address-column">
          <div class="address-header">
            <div class="address-icon sender-icon">寄</div>
            <div class="address-title">发货人信息</div>
            <el-button type="primary" plain size="small" @click="selectCustomer('sender')">选择客户</el-button>
          </div>
          
          <div class="address-form">
            <div class="form-item required">
              <div class="form-label">姓名</div>
              <el-input v-model="formData.sender.name" placeholder="请输入发货人姓名" />
            </div>
            
            <div class="form-item required">
              <div class="form-label">手机号</div>
              <el-input v-model="formData.sender.phone" placeholder="请输入发货人手机号" />
            </div>
            
            <div class="form-item required">
              <div class="form-label">发货地址</div>
              <el-input v-model="formData.sender.address" placeholder="请输入发货地址" />
            </div>
          </div>
        </div>
        
        <div class="address-switch" @click="switchAddresses">
          <el-icon><ArrowLeft /></el-icon>
        </div>
        
        <div class="address-column">
          <div class="address-header">
            <div class="address-icon receiver-icon">收</div>
            <div class="address-title">收货人信息</div>
            <el-button type="primary" plain size="small" @click="selectCustomer('receiver')">选择客户</el-button>
          </div>
          
          <div class="address-form">
            <div class="form-item required">
              <div class="form-label">姓名</div>
              <el-input v-model="formData.receiver.name" placeholder="请输入收货人姓名" />
            </div>
            
            <div class="form-item required">
              <div class="form-label">手机号</div>
              <el-input v-model="formData.receiver.phone" placeholder="请输入收货人手机号" />
            </div>
            
            <div class="form-item required">
              <div class="form-label">收货地址</div>
              <el-input v-model="formData.receiver.address" placeholder="请输入收货地址，配送上门请输入详细地址" />
            </div>
          </div>
        </div>
      </div>
      
      <!-- 货物信息 -->
      <div class="section goods-section">
        <div class="section-header">
          <div class="section-title">货品信息</div>
          <el-button type="primary" plain size="small" icon="Plus" @click="addGoodsItem">添加</el-button>
        </div>
        
        <div class="goods-table">
          <div class="goods-table-header">
            <div class="goods-cell goods-index">序号</div>
            <div class="goods-cell goods-name">货物名称</div>
            <div class="goods-cell goods-package">包装</div>
            <div class="goods-cell goods-quantity">数量(箱/袋)</div>
            <div class="goods-cell goods-weight">重量(kg)</div>
            <div class="goods-cell goods-volume">体积(方)</div>
            <div class="goods-cell goods-operation">操作</div>
          </div>
          
          <div v-for="(item, index) in formData.goodsList" :key="item.id" class="goods-row">
            <div class="goods-cell goods-index">{{ index + 1 }}</div>
            <div class="goods-cell goods-name">
              <el-input v-model="item.name" placeholder="请输入货品名称" />
            </div>
            <div class="goods-cell goods-package">
              <el-select v-model="item.package" placeholder="请选择">
                <el-option v-for="pkg in packageOptions" :key="pkg.value" :label="pkg.label" :value="pkg.value" />
              </el-select>
            </div>
            <div class="goods-cell goods-quantity">
              <el-input v-model="item.quantity" placeholder="请输入" />
            </div>
            <div class="goods-cell goods-weight">
              <el-input v-model="item.weight" placeholder="请输入" />
            </div>
            <div class="goods-cell goods-volume">
              <el-input v-model="item.volume" placeholder="长*宽*高(米)" />
            </div>
            <div class="goods-cell goods-operation">
              <el-button type="danger" icon="Delete" circle plain @click="removeGoodsItem(index)" />
            </div>
          </div>
          
          <div class="goods-summary">
            <div>总数量: {{ totals.quantity }}</div>
            <div>总重量: {{ totals.weight }}kg</div>
            <div>总体积: {{ totals.volume }}方</div>
          </div>
        </div>
      </div>
      
      <!-- 运费设置 -->
      <div class="section fee-section">
        <div class="section-header">
          <div class="section-title">运费设置</div>
          <el-button type="primary" plain size="small" @click="calculateFreight">查看计费标准</el-button>
        </div>
        
        <div class="fee-container">
          <div class="fee-row">
            <div class="fee-item">
              <div class="fee-label">运费</div>
              <el-input v-model="formData.fees.freight" placeholder="请输入" />
            </div>
            
            <div class="fee-item">
              <div class="fee-label">配送费</div>
              <el-input v-model="formData.fees.deliveryFee" placeholder="请输入" />
            </div>
            
            <div class="fee-item">
              <div class="fee-label">卸货费</div>
              <el-input v-model="formData.fees.loadingFee" placeholder="请输入" />
            </div>
            
            <div class="fee-item">
              <div class="fee-label">回款费</div>
              <el-input v-model="formData.fees.returnFee" placeholder="请输入" />
            </div>
            
            <div class="fee-item">
              <div class="fee-label">中转费</div>
              <el-input v-model="formData.fees.transferFee" placeholder="请输入" />
            </div>
          </div>
          
          <div class="fee-row">
            <div class="fee-item">
              <div class="fee-label">声明价值</div>
              <el-input v-model="formData.fees.declaredValue" placeholder="请输入" />
            </div>
            
            <div class="fee-item">
              <div class="fee-label">保费</div>
              <el-input v-model="formData.fees.insurance" placeholder="请输入" />
            </div>
            
            <div class="fee-item">
              <div class="fee-label">包装费</div>
              <el-input v-model="formData.fees.packagingFee" placeholder="请输入" />
            </div>
            
            <div class="fee-item">
              <div class="fee-label">其他费用</div>
              <el-input v-model="formData.fees.otherFee" placeholder="请输入" />
            </div>
          </div>
        </div>
      </div>
      
      <!-- 付款设置 -->
      <div class="section payment-section">
        <div class="section-header">
          <div class="section-title">付款设置</div>
        </div>
        
        <div class="payment-container">
          <div class="payment-method required">
            <div class="payment-label">付款方式</div>
            <el-radio-group v-model="formData.payment.method">
              <el-radio v-for="method in paymentMethods" :key="method.value" :label="method.value">
                {{ method.label }}
              </el-radio>
            </el-radio-group>
          </div>
          
          <div class="fee-row">
            <div class="fee-item" v-if="formData.payment.method === 'cash'">
              <div class="fee-label">现付</div>
              <el-input v-model="formData.payment.cashAmount" placeholder="请输入" />
            </div>
            
            <div class="fee-item" v-if="formData.payment.method === 'collect'">
              <div class="fee-label">提付</div>
              <el-input v-model="formData.payment.collectAmount" placeholder="请输入" />
            </div>
            
            <div class="fee-item" v-if="formData.payment.method === 'monthly'">
              <div class="fee-label">月结</div>
              <el-input v-model="formData.payment.monthlyAmount" placeholder="请输入" />
            </div>
            
            <div class="fee-item">
              <div class="fee-label">代收货款</div>
              <el-input v-model="formData.payment.agentFee" placeholder="请输入" />
            </div>
            
            <div class="fee-item">
              <div class="fee-label">手续费</div>
              <el-input v-model="formData.payment.handlingFee" placeholder="请输入" />
            </div>
          </div>
        </div>
      </div>
      
      <!-- 其他信息 -->
      <div class="section other-section">
        <div class="section-header">
          <div class="section-title">其他信息</div>
        </div>
        
        <div class="other-container">
          <div class="form-item">
            <div class="form-label">运输方式</div>
            <el-select v-model="formData.other.transportMode" placeholder="请选择">
              <el-option v-for="mode in transportModes" :key="mode.value" :label="mode.label" :value="mode.value" />
            </el-select>
          </div>
          
          <div class="form-item">
            <div class="form-label">订单备注</div>
            <el-input v-model="formData.other.remark" type="textarea" :rows="3" placeholder="请输入订单备注" />
          </div>
          
          <div class="form-item">
            <div class="form-label">图片上传</div>
            <div class="upload-container">
              <el-upload
                action="#"
                list-type="picture-card"
                :auto-upload="false"
              >
                <template #default>
                  <el-icon><Plus /></el-icon>
                  <div>上传图片</div>
                </template>
              </el-upload>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 底部操作栏 -->
      <div class="order-footer">
        <div class="total-amount">总运费：¥ <span class="amount">{{ totalFreight }}</span></div>
        <div class="action-buttons">
          <el-button plain @click="createOrderOnly">仅开单</el-button>
          <el-button type="primary" @click="printWaybill">打印运单</el-button>
          <el-button type="primary" @click="printLabel">打印标签</el-button>
          <el-button type="primary" @click="printBoth">双打</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.order-create-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 60px; /* 为底部操作栏预留空间 */
}

/* 顶部信息栏 */
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background-color: white;
  border-bottom: 1px solid #e4e7ed;
}

.waybill-info {
  display: flex;
  flex-direction: column;
}

.waybill-number, .goods-number {
  font-size: 14px;
  color: #606266;
}

.order-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.order-date {
  font-size: 14px;
  color: #606266;
}

/* 表单内容 */
.order-form {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.section {
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

/* 站点信息样式 */
.station-section {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.station-item {
  flex: 1;
  min-width: 200px;
}

.station-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.required .station-label::before,
.required .form-label::before,
.payment-method.required .payment-label::before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}

/* 发货人和收货人信息 */
.address-section {
  display: flex;
  align-items: stretch;
  gap: 16px;
}

.address-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.address-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.address-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 14px;
  margin-right: 8px;
}

.sender-icon {
  background-color: #4066FF;
}

.receiver-icon {
  background-color: #FFAB2B;
}

.address-title {
  flex: 1;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.address-switch {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #4066FF;
  color: white;
  font-size: 18px;
  cursor: pointer;
  margin-top: 40px;
}

.address-switch .el-icon {
  transform: rotate(180deg);
}

.address-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-item {
  display: flex;
  flex-direction: column;
}

.form-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

/* 货物信息样式 */
.goods-table {
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.goods-table-header {
  display: flex;
  background-color: #f5f7fa;
  font-weight: bold;
  border-bottom: 1px solid #ebeef5;
}

.goods-row {
  display: flex;
  border-bottom: 1px solid #ebeef5;
}

.goods-cell {
  padding: 8px;
  display: flex;
  align-items: center;
}

.goods-index {
  width: 60px;
  justify-content: center;
}

.goods-name {
  flex: 2;
}

.goods-package {
  flex: 1;
}

.goods-quantity {
  width: 120px;
}

.goods-weight {
  width: 120px;
}

.goods-volume {
  width: 150px;
}

.goods-operation {
  width: 80px;
  justify-content: center;
}

.goods-summary {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  padding: 12px;
  background-color: #f5f7fa;
  font-weight: bold;
}

/* 费用设置样式 */
.fee-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fee-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.fee-item {
  flex: 1;
  min-width: 200px;
}

.fee-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

/* 付款设置样式 */
.payment-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.payment-method {
  margin-bottom: 8px;
}

.payment-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

/* 其他信息样式 */
.other-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.upload-container {
  margin-top: 8px;
}

/* 底部操作栏 */
.order-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background-color: white;
  border-top: 1px solid #e4e7ed;
  z-index: 100;
}

.total-amount {
  font-size: 16px;
  color: #606266;
}

.amount {
  font-size: 20px;
  font-weight: bold;
  color: #4066FF;
}

.action-buttons {
  display: flex;
  gap: 12px;
}
</style> 